<template>
  <basic-container>
    <el-tabs v-model="editableTabsValue" type="card" @tab-click="tabClick">
      <el-tab-pane
        :key="item.name"
        v-for="(item, index) in editableTabs"
        :label="item.title"
        :name="item.name"
      >
        <el-form style="">
          <el-row style="border-bottom: 10px solid #eaebe8">
            <el-col :span="8">
              <div :id="'sexChart' + index" style="height: 280px"></div>
            </el-col>
            <el-col :span="8">
              <div :id="'gradeChart' + index" style="height: 280px"></div>
            </el-col>
            <el-col :span="8">
              <div :id="'levelChart' + index" style="height: 280px"></div>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-row v-if="editableTabs.length">
      <div class="census-manage">
        <basic-container>
          <avue-crud
            :table-loading="loading"
            :option="option"
            :data="data"
            :page.sync="page"
            @on-load="onLoad"
            :search.sync="search"
            @refresh-change="onLoad"
            @search-change="searchChange"
            v-model="item11"
          >
            <template slot-scope="{ type, size, row }" slot="menu">
              <el-button
                icon="el-icon-view"
                :size="size"
                :type="type"
                @click="getToDetail(row)"
                >查看详情</el-button
              >
            </template>
          </avue-crud>
        </basic-container>
      </div>
    </el-row>
  </basic-container>
</template>

<script>
import {
  getWarningType,
  getTenant,
  userpersonalsummaryList,
  findAbnormalLevelNum,
  findAbnormalSexNum,
  findAbnormalGradeNum,
} from "@/api/report/report";
import { mapGetters } from "vuex";
import * as echarts from "echarts";
export default {
  name: "thirdRegister",
  components: {},
  data() {
    return {
      echartsObj: {},
      item: {},
      user: {},
      search: {},
      answerData: [],
      sampleParams: {},
      projectId: "",
      answerDetailDialogView: false,
      selectionList: [],
      promote: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        // addBtnText: '添加类别',
        delBtnText: "删除",
        excelBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        border: true,
        selection: false,
        index: true,
        expandLevel: 3,
        headerAlign: "left",
        align: "left",
        tree: false,
        addBtn: false,
        searchLabelWidth: 120,
        height: 300,
        menuWidth: 100,
        column: [
          {
            label: "学号",
            prop: "userCode",
            overHidden: true,
            width: 150,
            search: true,
          },
          {
            label: "姓名",
            prop: "userName",
            width: 150,
            overHidden: true,
            search: true,
          },
          {
            label: "性别",
            width: 150,
            overHidden: true,
            prop: "sex",
            search: true,
            type: "select",
            dicData: [
              {
                label: "男",
                value: "1",
              },
              {
                label: "女",
                value: "2",
              },
            ],
          },
          {
            label: "学校",
            overHidden: true,
            prop: "schoolName",
          },
          {
            label: "年级",
            width: 150,
            search: true,
            overHidden: true,
            searchMultiple: true,
            type: "select",
            prop: "gradeName",
            props: {
              label: "gradeName",
              value: "gradeName",
            },
            dicUrl: `/api/blade-system/grade/list`,
          },
          {
            label: "班级",
            overHidden: true,
            width: 150,
            prop: "className",
          },
          {
            label: "测试项目",
            overHidden: true,
            width: 150,
            prop: "projectName",
          },
          {
            label: "测题发布时间",
            overHidden: true,
            width: 150,
            prop: "createAt",
          },
          {
            label: "测评总结果",
            overHidden: true,
            width: 150,
            search: true,
            type: "select",
            prop: "level",
            searchMultiple: true,
            dicUrl: "/api/blade-system/dict/dictionary?code=warning_level",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            dataType: "number",
            // dicData: [
            //   {
            //     label: "一级预警",
            //     value: "1",
            //   },
            //   {
            //     label: "二级预警",
            //     value: "2",
            //   },
            //   {
            //     label: "三级预警",
            //     value: "3",
            //   },
            //   {
            //     label: "正常",
            //     value: "0",
            //   },
            // ],
          },
          {
            label: "干预结果",
            overHidden: true,
            width: 150,
            dicData: [
              {
                label: "已干预",
                value: "Y",
              },
              {
                label: "未干预",
                value: "N",
              },
            ],
            type: "select",
            search: true,
            prop: "interveneFlag",
          },
        ],
      },
      data: [],
      loading: true,
      item11: {},

      editableTabsValue: "1",
      editableTabs: [],
      tabIndex: 1,
      factorTypeId: "1",
      dataList: [],
      isLoad: false,
      schoolName: "",
      chartObj: {},
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {},
  mounted() {
    // this.initChart();
    this.getWarningType();
  },
  methods: {
    tabClick(tabObj) {
      this.$nextTick(() => {
        this.getSchoolBarInfo(
          "sexChart" + tabObj.index,
          this.echartsObj[tabObj.index].sexxAxisData,
          this.echartsObj[tabObj.index].sexData
        );
        this.getSchoolBarInfo(
          "gradeChart" + tabObj.index,
          this.echartsObj[tabObj.index].gradexAxisData,
          this.echartsObj[tabObj.index].gradeData
        );
        this.getSchoolBarInfo(
          "levelChart" + tabObj.index,
          this.echartsObj[tabObj.index].levelxAxisData,
          this.echartsObj[tabObj.index].levelData
        );
        this.factorTypeId = this.editableTabs[tabObj.index].dictKey;
        this.onLoad(this.page, {
          factorTypeId: this.editableTabs[tabObj.index].dictKey,
        });
      });
    },
    getSchoolBarInfo(id, xAxisData, dataList) {
      var chartDom = document.getElementById(id);
      if (echarts.getInstanceByDom(chartDom)) {
        echarts.getInstanceByDom(chartDom).dispose();
      }
      var myChart = echarts.init(chartDom);
      var option = {
        grid: {
          top: 50,
          bottom: "15%",
          height: 150,
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            interval: 0,
            rotate: 40,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: dataList,
            type: "bar",
            barMaxWidth: 20,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },

    getuserInfo() {
      getTenant(this.$route.query.tenantId).then((res) => {
        this.schoolName = res.data.data.tenantName;
      });
    },
    getWarningType() {
      let tenantId = this.$route.query.tenantId;
      getWarningType({}).then((res) => {
        if (res.data.code == 200) {
          let resultData = [];
          res.data.data.map((v) => {
            if (v.dictKey != 1) {
              resultData.push(v);
            }
          });
          const promiseList = [];
          let nameList = [];
          this.editableTabsValue = resultData[0].dictValue;
          if (this.$route.query.typeName) {
            this.editableTabsValue = this.$route.query.typeName;
            this.factorTypeId = this.$route.query.typeName;
          }
          this.onLoad(this.page, { factorTypeId: resultData[0].dictKey });
          resultData.map((item) => {
            item.obj = {};
            item.title = item.dictValue;
            item.name = item.dictValue;
            nameList.push(item.typeName);
            let params = { tenantId: tenantId };
            // if (this.$route.query.projectId) {
            //   params.projectId = this.$route.query.projectId;
            // }
            params.tenantId = tenantId;
            params.factorTypeId = item.dictKey;
            promiseList.push(
              ...[
                findAbnormalSexNum(params),
                findAbnormalGradeNum(params),
                findAbnormalLevelNum(params),
              ]
            );
          });
          this.editableTabs = resultData;

          Promise.all(promiseList).then((data) => {
            let index = 0;
            for (let i = 0; i < data.length; i = i + 3) {
              //////////性别
              let sexData = [];
              let sexxAxisData = [];
              data[i].data.data.map((item) => {
                sexxAxisData.unshift(
                  item.code == 1 ? "男" : item.code == 2 ? "女" : ""
                );
                sexData.unshift(item.num);
              });
              this.getSchoolBarInfo("sexChart" + index, sexxAxisData, sexData);
              //////////年级
              let gradeData = [];
              let gradexAxisData = [];
              data[i + 1].data.data.map((item) => {
                gradexAxisData.unshift(item.code);
                gradeData.unshift(item.num);
              });
              this.getSchoolBarInfo(
                "gradeChart" + index,
                gradexAxisData,
                gradeData
              );
              //////////级别
              let levelData = [];
              let levelxAxisData = [];
              let levelName = ["一级预警", "二级预警", "三级预警"];
              data[i + 2].data.data.map((item) => {
                levelxAxisData.unshift(levelName[item.code * 1 - 1]);
                levelData.unshift(item.num);
              });
              this.getSchoolBarInfo(
                "levelChart" + index,
                levelxAxisData,
                levelData
              );
              this.echartsObj[index] = {
                sexxAxisData: sexxAxisData,
                sexData: sexData,
                gradexAxisData: gradexAxisData,
                gradeData: gradeData,
                levelxAxisData: levelxAxisData,
                levelData: levelData,
              };
              index++;
            }
          });
        }
      });
    },
    async onLoad(page = this.page, params = this.search || {}) {
      params.factorTypeId = this.factorTypeId;
      if (this.$route.query.projectId) {
        params.projectId = this.$route.query.projectId;
      }
      params.tenantId = this.$route.query.tenantId;
      if (params.level) {
        if (Array.isArray(params.level)) {
          params.levels = params.level.join(",");
        } else {
          params.levels = params.level;
        }
        delete params.level;
      } else {
        params.levels = "";
      }
      if (params.gradeName) {
        if (Array.isArray(params.gradeName)) {
          params.grades = params.gradeName.join(",");
        } else {
          params.grades = params.gradeName;
        }
        delete params.gradeName;
      }
      if (this.$route.query.projectId) {
        params.projectId = this.$route.query.projectId;
      }
      const {
        data: { data },
      } = await userpersonalsummaryList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      );
      this.loading = false;
      this.data = data.records;
      this.data.map((item) => {
        item.level = item.level + "";
      });
      this.page.total = data.total;
      this.loading = false;
    },
    async searchChange(params, done) {
      await this.onLoad(this.page, params);
      done();
    },
    handleDown() {
      this.$router.push({
        name: "异常详情",
        query: {
          projectId: this.$route.query.projectId,
          tenantId: this.$route.query.tenantId,
        },
      });
    },
    getToDetail(row) {
      this.$router.push({
        name: "个人档案",
        query: {
          userId: row.userId,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.m-top20 {
  margin-top: 20px;
}
.table_style td,
th {
  padding: 5px;
  font-size: 15px;
}
.table_style {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
.tableTdCss {
  border: 1px solid #d3d3d3;
  width: 150px;
}
.headerCss {
  background: #29d;
  color: white;
}
.tableRowSingle {
  background: #ebeef5;
}
.tableRowDouble {
  background: #ecf5ff;
}
.h3Css {
  text-align: center;
  color: white;
  background: dodgerblue;
  padding: 5px;
}
.titleCss {
  padding: 10px;
  font-weight: 600;
  font-size: 16px;
  font-family: auto;
}
</style>